<template>
	<view class="container">
		<!--好文推荐搜索框-->
		<view class="header">
			<image src="../../static/images/搜索_o.png"></image>
			<input placeholder="搜索"/>
		</view>
		<!-- 推荐文章列表 -->
		<scroll-view class="article-list" scroll-y='true'>
		  <!--推荐文章-->
		  
			<view class="article" v-for="item in articles" :key="item.id">
				<!-- <navigator url="/pages/essayContent/essayContent" hover-class="navigator-hover" @click="aa" :data-id="item.articleId"> 	 -->
				  <!--推荐人-->
				  <view class="article1">
					  <image :src=item.adminAvatar></image>
					  {{item.adminName}}
				  </view>
				  <view class="content" @click="weizhang" :data-ids="item.articleId">
					  <image src="../../static/images/推荐.png"></image>
					  <text>{{item.articleContent}}</text>
				  </view>
				<!-- </navigator> -->
			</view>				
		  
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articles: [],
			}
		},
		mounted() {
			//var that=this;
			//箭头函数指向是父级this指向
					this.getArticleList();
		},
		methods: {
			getArticleList:function(){
				uni.request({
					url:"http://localhost:8888/articleList",
					success:(res)=>{
						if(res.data.code==0){
						this.articles=res.data.data;
						this.$forceUpdate();
						}
						else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
		 weizhang:function(e) {
		  // 要缓存的数据
		  var articleId=e.currentTarget.dataset.ids;
		  console.log(e);
		  try {
		    // 使用 uni.setStorage 进行数据缓存
		     uni.setStorageSync('article',articleId);
		
		    // 缓存成功后执行页面跳转
		    uni.navigateTo({
		      url: '/pages/essayContent/essayContent',
		    });
		  } catch (error) {
		    console.error('Failed to cache data:', error);
		    // 处理缓存失败的情况
		  }
		}

		}
	}
</script>

<style>
.container{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 750rpx;
	height: 1210rpx;
	background-color: rgb(246 245 245);
}
.header{
	display: flex;
	flex-direction: row;
	height: 60rpx;
	width: 700rpx;
	align-items: center;
	margin-top: 10rpx;
	box-shadow: 0 0 10rpx #90A674;  /*添加阴影效果 */
}
.header>image{
	height: 50rpx;
	width: 50rpx;
	margin-right: 10rpx;
}
.header>input{
	font-size: 28rpx;
	font-weight: normal;
}
.article-list{
	width: 100%;
	height: 1100rpx;
	margin-top: 5rpx;
}
.article{
	display: flex;
	flex-direction: column;
	margin-top: 10rpx;
	height: 450rpx;
	width: 680rpx;
	margin-left: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 0 10rpx #90A674;  /*添加阴影效果 */
}
.article1{
	display: flex;
	flex-direction: row;
	width: 300rpx;
	height: 130rpx;
	align-items: center;
	font-size: 28rpx;
}
.article1 image{
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;	
	opacity: 0.8;
}
.content{
	display: flex;
	flex-direction: row;
	margin-top: 10rpx;
}
.content text{
	/* display: flex;
	width: 600rpx;
	flex-wrap: wrap;
	align-content: flex-start; */
	width: 600rpx;
	
	 display: -webkit-box;
	  -webkit-line-clamp: 6;  /* 限制在两行 */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
}
.content image{
	height: 50rpx;
	width: 50rpx;
	margin-right: 10rpx;
}
/* .article-image{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 150rpx;
	box-shadow: 0 0 10rpx #90A674;  
}
.article-image>image{
	width: 120rpx;
	height: 120rpx;
} */
</style>
